<script lang="ts" setup generic="T">
import { isAdmin } from '@/index';

import HqUploadOne from '../upload/HqUploadOne.vue';
import HqUploadImport from '../upload/HqUploadImport.vue';
import type { DialogImportModel } from '@/index.d';

const props = defineProps<{ title: string; baseUrl: string }>();

const importDialogModel = defineModel<DialogImportModel>('dialogModel', {
  required: true
});

const showDialog = () => (importDialogModel.value.visible = true);
</script>
<template>
  <el-button type="primary" @click="showDialog">导入用户</el-button>
  <el-dialog
    v-model="importDialogModel.visible"
    draggable
    destroy-on-close
    :show-close="false"
    :close-on-click-modal="false"
    width="30%"
    top="100px"
    v-bind="$attrs"
    class="hq-dialog"
  >
    <template #header>
      <div class="hq-dialog-header">
        <div class="ha-dialog-header-content">
          <slot name="header"> 批量导入{{ props.title }}</slot>
        </div>
      </div>
    </template>
    <template #default>
      <el-scrollbar height="40vh">
        <el-space fill wrap>
          <el-card shadow="hover">
            <template #header>数据导入</template>
            <template #default>
              <HqUploadImport
                key-word="39bde02b-a5f0-4005-b689-d82942e6a989"
                :base-url="baseUrl"
                :disabled="false"
              />
            </template>
          </el-card>
          <el-card shadow="hover" v-if="isAdmin()">
            <template #header>模板管理</template>
            <template #default>
              <HqUploadOne key-word="605dcfe5-661f-46d0-84b1-208067fe1094" :disabled="false" />
            </template>
            <template #footer>
              <a
                href="https://junxi-1259130257.cos.ap-nanjing.myqcloud.com/2025/3/29/d57b4442-15ae-46c7-8e7d-ec1bd7a37347/CH-Z-2217FCGSG099-5.pdf"
                target="_blank"
                style="text-decoration: none"
              >
                右键点击下载模板
              </a>
            </template>
          </el-card>
        </el-space>
      </el-scrollbar>
    </template>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="danger" @click="dialogModel.visible = false"> 关闭 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
.el-dialog {
  .hq-dialog-header {
    display: flex;
    justify-content: space-between;
  }

  .el-scrollbar {
    padding-right: 10px;
    .el-space {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
